<template>
	<view>
		<xk-header :headerbg="true" :back="true" title="预约登记"></xk-header>
		<view class="util-bar">
			<view class="contentbox">
				<u--form labelPosition="left" :model="formdata" :rules="rules" ref="uviewForm1">
					<u-row customStyle="margin-bottom:15px">
						<u-col span="12">
							<view class="danhao-text">访问信息：</view>
						</u-col>
					</u-row>
					<u-form-item label="被访公司:" :required="true" prop="receiveOrgName" borderBottom ref="receiveOrgName"
						labelWidth="120">
						<!-- <u--input v-model="formdata.receiveOrgName" placeholder="请输入被访公司" border="none"></u--input> -->
						<view :class="formdata.receiveOrgName?'':'wodecolor'" @click="receiveOrgNameClick">
							{{formdata.receiveOrgName?formdata.receiveOrgName:'请输入被访公司'}}
						</view>
					</u-form-item>
					<u-picker :show="showReceiveOrgName" :columns="columns" @confirm="ReceiveOrgNameconfirm"
						@change="ReceiveOrgNamechange" :closeOnClickOverlay="true" @cancel='showReceiveOrgName = false'
						@close="showReceiveOrgName = false" keyName="orgName"></u-picker>
					<u-form-item label="被访人姓名:" :required="true" prop="receiver" borderBottom ref="receiver"
						labelWidth="120">
						<u--input v-model="formdata.receiver" placeholder="请输入被访人姓名" border="none"></u--input>
					</u-form-item>
					<u-form-item label="被访人手机:" :required="true" prop="receiverPhone" borderBottom ref="receiverPhone"
						labelWidth="120">
						<u--input v-model="formdata.receiverPhone" placeholder="请输入被访人手机" border="none"></u--input>
					</u-form-item>
					<u-form-item label="访问楼层:" :required="true" prop="reachFloor" borderBottom ref="reachFloor"
						labelWidth="120">
						<u--input v-model="formdata.reachFloor" placeholder="请输入访问楼层" border="none"></u--input>
					</u-form-item>
					<u-form-item label="访问开始日期:" :required="true" prop="startTime" borderBottom ref="startTime"
						labelWidth="120">
						<!-- <u--input v-model="formdata.startTime" placeholder="请输入访问开始日期" border="none"></u--input> -->
						<view :class="formdata.startTime?'':'wodecolor'" @click="showstartTime = true">
							{{formdata.startTime?formdata.startTime:'请输入访问开始日期'}}
						</view>
					</u-form-item>
					<u-datetime-picker ref="datetimePicker" :show="showstartTime" v-model="startTime" mode="datetime"
						:closeOnClickOverlay="true" @change="startTimeChange" @close="showstartTime = false"
						@confirm="confirmstartTime" @cancel='showstartTime = false'></u-datetime-picker>
					<u-form-item label="访问结束日期:" :required="true" prop="endTime" borderBottom ref="endTime"
						labelWidth="120">
						<!-- <u--input v-model="formdata.endTime" placeholder="请输入访问结束日期" border="none"></u--input> -->
						<view :class="formdata.endTime?'':'wodecolor'" @click="showendTime = true">
							{{formdata.endTime?formdata.endTime:'请输入访问结束日期'}}
						</view>
					</u-form-item>
					<u-datetime-picker ref="datetimePicker" :show="showendTime" v-model="endTime" mode="datetime"
						:closeOnClickOverlay="true" @change="endTimeChange" @close="showendTime = false"
						@confirm="confirmendTime" @cancel='showendTime = false'></u-datetime-picker>
					<u-form-item label="访问事由:" :required="true" prop="reason" borderBottom ref="reason"
						labelWidth="120">
						<u--input v-model="formdata.reason" placeholder="请输入访问事由" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>

			<view class="contentbox">
				<u--form labelPosition="left" :model="formdata2" :rules="rules2" ref="uviewForm2">
					<u-row customStyle="margin-bottom:15px">
						<u-col span="12">
							<view class="danhao-text">访客信息：</view>
						</u-col>
					</u-row>
					<u-form-item label="访客姓名:" :required="true" prop="visitorName" borderBottom ref="visitorName"
						labelWidth="120">
						<u--input v-model="formdata2.visitorName" placeholder="请输入访客姓名" border="none"></u--input>
					</u-form-item>
					<u-form-item label="访客电话:" :required="true" prop="phone" borderBottom ref="phone" labelWidth="120">
						<u--input v-model="formdata2.phone" placeholder="请输入访客电话" border="none"></u--input>
					</u-form-item>
					<u-form-item label="访客所在单位:" :required="true" prop="company" borderBottom ref="company"
						labelWidth="120">
						<u--input v-model="formdata2.company" placeholder="请输入访客所在单位" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="submitInfo">提交审核</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				formdata: {
					receiveOrgName: '',
					receiver: '',
					receiverPhone: '',
					startTime: '',
					endTime: '',
					reason: '',
					reachFloor: '',
					receiveOrgId: '',
				},
				rules: {
					'receiveOrgName': {
						type: 'string',
						required: true,
						message: '请填写被访公司',
						trigger: ['blur', 'change']
					},
					'receiver': {
						type: 'string',
						required: true,
						message: '请填写被访人姓名',
						trigger: ['blur', 'change']
					},
					'receiverPhone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// 过滤第一层，先判断输入为不为空，因为required: false，不是必填项，所以为空应该返回true
								if (value) {
									return this.$u.test.mobile(value);
								} else {
									return true
								}
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'startTime': {
						type: 'string',
						required: true,
						message: '请填写访问开始时间',
						trigger: ['blur', 'change']
					},
					'endTime': {
						type: 'string',
						required: true,
						message: '请填写访问结束时间',
						trigger: ['blur', 'change']
					},
					'reason': {
						type: 'string',
						required: true,
						message: '请填写访问事由',
						trigger: ['blur', 'change']
					},
					'reachFloor': [{
							required: true,
							message: '请填写访问楼层',
							trigger: ['blur', 'change']
						},
						// {
						// 	validator: (rule, value, callback) => {
						// 		return RegExp(
						// 			/^[0-9a-zA-Z]*$/g
						// 		).test(value)
						// 	},
						// 	message: '只能包含字母或数字',
						// 	trigger: ['change', 'blur']
						// }
						{
							validator: (rule, value, callback) => {
								return RegExp(
									/^[0-1][1-9]$|^[2][0]$|^[1-9]$/
								).test(value)
							},
							message: '只能填写1~20的数字',
							trigger: ['change', 'blur']
						}
					],
				},
				formdata2: {
					visitorName: '',
					phone: '',
					company: '',
				},
				rules2: {
					'visitorName': {
						type: 'string',
						required: true,
						message: '请填写访问姓名',
						trigger: ['blur', 'change']
					},
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// 过滤第一层，先判断输入为不为空，因为required: false，不是必填项，所以为空应该返回true
								if (value) {
									return this.$u.test.mobile(value);
								} else {
									return true
								}
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'company': {
						type: 'string',
						required: true,
						message: '请填写访客所在单位',
						trigger: ['blur', 'change']
					},
				},
				showendTime: false,
				showstartTime: false,
				endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
				startTime: moment().format('YYYY-MM-DD HH:mm:ss'),
				columns: [
					[]
				],
				showReceiveOrgName: false,
				visitorId: '',
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uviewForm1.setRules(this.rules)
			this.$refs.uviewForm2.setRules(this.rules2)
		},
		onShow() {
			this.getAllCompany()
			// this.getQRcode()
		},
		methods: {
			ReceiveOrgNameconfirm(e) {
				this.showReceiveOrgName = false
				this.formdata.receiveOrgName = e.value[0].orgName
				this.formdata.receiveOrgId = e.value[0].orgId
			},
			receiveOrgNameClick() {
				this.showReceiveOrgName = true
				// this.getAllCompany()
			},
			ReceiveOrgNamechange() {},
			confirmendTime(e) {
				this.formdata.endTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
				this.showendTime = false
			},
			endTimeChange(e) {
				this.formdata.endTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
			},
			confirmstartTime(e) {
				this.formdata.startTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
				this.showstartTime = false
			},
			startTimeChange(e) {
				this.formdata.startTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss')
			},
			submitInfo() {
				this.$refs.uviewForm1.validate().then(res => {
					this.$refs.uviewForm2.validate().then(res => {
						// this.formdata.company = this.formdata2.company
						// this.formdata.phone = this.formdata2.phone
						// this.formdata.visitorName = this.formdata2.visitorName
						const {
							company,
							phone,
							visitorName
						} = this.formdata2;
						this.formdata = {
							...this.formdata,
							company,
							phone,
							visitorName
						}
						this.$util.confirm({
							content: "确定提交审核？",
							confirmText: "确定"
						}).then(isConfirm => {
							if (isConfirm) {
								this.$util.post({
									url: "wx/ob/visit/visitorSubApply",
									// url:'ob/visit/visitApplySubmit',
									data: this.formdata,
								}).then(res => {
									// console.log('申请',res)
									// this.visitorId=res.visitorId
									uni.$emit('refreshHomeDataList')
									uni.$emit('refreshVehicleInfo')
									uni.redirectTo({
										url: '/pagesA/passthrough/passthrough-finish?type=accept'
									})
								})
							}
						})
					}).catch(errors => {
						uni.$u.toast('请输入必填项')
					})
				}).catch(errors => {
					uni.$u.toast('请输入必填项')
				})
				// this.$refs.uviewForm2.validate().then(res => {
				// 	// this.formdata.company = this.formdata2.company
				// 	// this.formdata.phone = this.formdata2.phone
				// 	// this.formdata.visitorName = this.formdata2.visitorName
				// 	const {
				// 		company,
				// 		phone,
				// 		visitorName
				// 	} = this.formdata2;
				// 	this.formdata = {
				// 		...this.formdata,
				// 		company,
				// 		phone,
				// 		visitorName
				// 	}
				// 	this.$util.confirm({
				// 		content: "确定提交审核？",
				// 		confirmText: "确定"
				// 	}).then(isConfirm => {
				// 		if (isConfirm) {
				// 			this.$util.post({
				// 				url: "wx/ob/visit/visitorSubApply",
				// 				// url:'ob/visit/visitApplySubmit',
				// 				data: this.formdata,
				// 			}).then(res => {
				// 				// console.log('申请',res)
				// 				// this.visitorId=res.visitorId
				// 				uni.$emit('refreshHomeDataList')
				// 				uni.$emit('refreshVehicleInfo')
				// 				uni.redirectTo({
				// 					url: '/pagesA/passthrough/passthrough-finish?type=accept'
				// 				})
				// 			})
				// 		}
				// 	})
				// }).catch(errors => {
				// 	uni.$u.toast('请输入必填项')
				// })
			},
			//生成二维码
			// getQRcode(){
			// 	this.$util.post({
			// 		url: "ob/visit/getOrgList",
			// 		data: {"visitorId": this.visitorId},
			// 	}).then(res => {
			// 		console.log(res)
			// 		res.records.forEach(item => {
			// 			this.columns[0].push(item)
			// 		})
			// 	})
			// },
			//查询公司
			getAllCompany() {
				let formdata = {
					"pageSize": "100000",
					"pageNo": "1"
				}
				this.$util.post({
					url: "wx/ob/visit/getAllCompany",
					// url: "ob/visit/getOrgList",
					data: formdata,
				}).then(res => {
					// console.log(res)
					res.forEach(item => {
						this.columns[0].push(item)
					})
					// console.log('this.columns',this.columns)
				})
			},
		}
	}
</script>

<style>
	.contentbox {
		background: #FFFFFF;
		padding: 10px 10px 10px 10px;
		margin: 10px;
		border-radius: 6px;
	}

	.danhao-text {
		font-size: 34rpx;
		/* font-weight:bold; */
		color: rgb(0, 82, 217);
	}

	.util-bar {
		height: calc(100% - 300rpx);
		overflow-y: auto;
	}

	.wodecolor {
		color: rgb(192, 196, 204);
	}
</style>
